<template>
	<view>
		<view class="address-window" :class="house.house==true?'on':''">
			<view class='title'>小区选择<text class='iconfont icon-guanbi' @tap='close'></text></view>

		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @blur="InputBlur" :adjust-position="false" type="text" 
				placeholder="搜索门店/地址" confirm-type="search" v-model="searchHouse"></input>
			</view>
		</view>
			
			<view class='list'>
				<view class='item acea-row row-between-wrapper' :class='active==index?"font-color":""' v-for="(item,index) in houseList"
				 @tap='tapHouse(index,item.id,item.houseName,item.addr)' :key='index'>
					<text class='iconfont icon-ditu' :class='active==index?"font-color":""'></text>
					<view class='address'>
						<view class='name' :class='active==index?"font-color":""'>{{item.houseName}}</view>
						<view class='line1'>{{item.addr}}</view>
					</view>
				</view>
			</view>
			<!-- 无地址 -->
			<view class='pictrue' v-if="!is_loading && !houseList.length">
				<image src='../../static/images/noAddress.png'></image>
			</view>
		</view>
		<view class='mask' catchtouchmove="true" :hidden='house.house==false' @tap='close'></view>
	</view>
</template>

<script>
	import {
		getHouseList
	} from '@/api/water.js';

	export default {
		props: {
			house: {
				type: Object,
				default: function() {
					return {
						house: true,
						addressId: 0,
					};
				}
			},
			isLog: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				active: 0,
				//地址列表
				houseList: [],
				is_loading: true,
				searchHouse: ''
			};
		},

		methods: {
			tapHouse: function(e, houseId,houseName,addr) {
				this.active = e;
				this.$emit('OnChangeHouse', houseId,houseName,addr);
			},
			close: function() {
				this.$emit('changeClose');
			},
			
			InputFocus: function(){
				alert("focuse");
			},
			
			InputBlur: function(){
				this.getHouseList(this.searchHouse);
			 },
			
			getHouseList: function(searchKey) {
				let that = this;
				getHouseList(searchKey).then(res => {
					let houseList = res.data;
					that.houseList=houseList;
					that.is_loading = false;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("@/static/css/base.css");
	
	.address-window {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 101;
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.address-window.on {
		transform: translate3d(0, 0, 0);
	}

	.address-window .title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		height: 123rpx;
		line-height: 123rpx;
		position: relative;
	}

	.address-window .title .iconfont {
		position: absolute;
		right: 30rpx;
		color: #8a8a8a;
		font-size: 35rpx;
	}

	.address-window .list .item {
		margin-left: 30rpx;
		padding-right: 30rpx;
		border-bottom: 1px solid #eee;
		height: 129rpx;
		font-size: 25rpx;
		color: #333;
	}

	.address-window .list .item .iconfont {
		font-size: 37rpx;
		color: #2c2c2c;
	}

	.address-window .list .item .iconfont.icon-complete {
		font-size: 30rpx;
		color: #fff;
	}

	.address-window .list .item .address {
		width: 560rpx;
	}

	.address-window .list .item .address .name {
		font-size: 28rpx;
		font-weight: bold;
		color: #282828;
		margin-bottom: 4rpx;
	}

	.address-window .list .item .address .name .phone {
		margin-left: 18rpx;
	}

	.address-window .addressBnt {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		width: 690rpx;
		height: 86rpx;
		border-radius: 43rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 85rpx auto;
	}

	.address-window .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 0 auto;
	}

	.address-window .pictrue image {
		width: 100%;
		height: 100%;
	}
	
	[class*="cuIcon-"] {
		font-family: "cuIcon";
		font-size: inherit;
		font-style: normal;
	}
	
	.cuIcon-search:before {
		content: "\e65c";
	}
	/* ==================
	          操作条
	 ==================== */
	
	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}
	
	.cu-bar .search-form {
		background-color: #f5f5f5;
		line-height: 64upx;
		height: 64upx;
		font-size: 24upx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30upx;
	}
	
	.cu-bar .search-form+.action {
		margin-right: 30upx;
	}
	
	.cu-bar .search-form input {
		flex: 1;
		padding-right: 30upx;
		height: 64upx;
		line-height: 64upx;
		font-size: 26upx;
		background-color: transparent;
	}
	
	.cu-bar .search-form [class*="cuIcon-"] {
		margin: 0 0.5em 0 0.8em;
	}
	
	.cu-bar .search-form [class*="cuIcon-"]::before {
		top: 0upx;
	}
	
	.round {
		border-radius: 5000upx;
	}
</style>
